<template>
  <div class='comment-input-wrapper'>
    <textarea class='comment-input-box'
              v-model.trim="replyText"
              placeholder="请输入您的回复"
              @blur='blurInput'></textarea>
    <div class='comment-input-handle'>
      <span class='handle-cancel' @click='cancelReply'>取消</span>
      <span class='handle-send' :class='{active: replyText}' @click='sendReply'>发送</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'commentInput',
  components: {
  },
  data () {
    return {
      replyText: ''
    }
  },
  props: {
  },
  methods: {
    blurInput () {
      window.scrollTo({
        top: 0,
        left: 0,
        behavior: 'smooth'
      })
    },
    cancelReply () {
      this.$emit('cancel')
    },
    sendReply () {
      if (!this.replyText) {
        return false
      } else {
        this.$emit('send', this.replyText)
      }
    }
  },
  mounted () {
  }
}
</script>

<style scoped lang='stylus'>
.comment-input-wrapper
  background #ffffff
  border-radius 6px
  padding 0 10px
  overflow hidden
  .comment-input-box
    margin-top 10px
    border 1px solid #d7d7d7
    resize none
    height 44px
    padding 6px
    font-size 12px
    background #f7f7f7
    border-radius 6px
    outline none
    appearance none
    &::-webkit-input-placeholder
      font-size 12px
  .comment-input-handle
    display flex
    justify-content flex-end
    padding 4px 0
    .handle-cancel
      font-size 12px
      border-radius 6px
      letter-spacing 1px
      color #03576c
      margin-right 10px
    .handle-send
      font-size 12px
      border-radius 6px
      letter-spacing 1px
      color #bbb
      &.active
        color #03576c
</style>
